<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="vue.js"></script>
</head>
<body>
  <div id="app">
    <my-parent></my-parent>
  </div>
</body>
<template id="parent">
  <div>
    父组件 {{ val }}
    <!-- 父组件在调用子组件的地方，绑定一个 自定义的事件， 该事件由父组件定义， -->
    <my-son @my-event="getData"></my-son>
  </div>
</template>
<template id="son">
  <div>
    子组件
    <h6>我是子组件</h6>
    <button @click="sendData">传值给父组件</button>
  </div>
</template>
<script>
  const Son = {
    template: '#son',
    methods: {
      // 在子组件的某个事件的内部， 通过this.$emit(自定义的事件名， 参数) 传递值即可
      sendData () {
        this.$emit('my-event', 10000)
      }
    }
  }
  const Parent = {
    template: '#parent',
    data(){
      return {
        val:this.val,
      }
    },
    methods: {
      // 接收到的参数就是子组件传递的值
      getData (val) {
        this.val = val;
      }
    },
    components: {
      'my-son': Son
    }
  }

  new Vue({
    el: '#app',
    components: {
      'my-parent': Parent
    }
  })
</script>
</html>